<template>
  <div class="diantai">
      <div class="diantaileft">

          <img src="../../assets/img/cidai.png" alt="">

      </div>
      <div class="diantairight">
          <div class="title">
              Hyper Pop
          </div>
          <div class="fm">
              FM
          </div>
          <div class="bottom">
              <div class="bottom-left">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
              </div>
              <div class="bottom-right">
                    <span v-if="isplay" class="iconfont icon-zanting" @click="pausedFun"></span>
            <span v-if="!isplay"  class="iconfont icon-bofang" @click="playFun"></span>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {get} from '../../http/request.js'
import {mapState} from 'vuex'
export default {
    props:['id']
    ,
    data(){
       return{
           isplay:false
       }
    },
    methods:{
   playFun(){
       this.$store.commit('changesongid',this.id)
       this.$store.commit('changepaused',true)
       this.isplay=true
   },
   pausedFun(){
        
        this.$store.commit('changepaused',false)
       this.isplay=false

   }
    },
    computed:{
         ...mapState(['songid'])
    },
    watch:{
        //   songid(value){
        //       if(value!=this.id){
        //           this.isplay=false
        //           this.$store.commit('changepaused',true)
        //       }
        //       else{
        //            this.isplay=true
        //           this.$store.commit('changepaused',false)

        //       }

        //   }
    },
    mounted(){
        // console.log(this.id);
        // 获取歌曲评论
        get(`/comment/music?id=${this.id}&limit=1`).then(res=>{
            console.log(res.data);
            this.userinfo=res.data.hotComments[0]
            this.hotComments=res.data.hotComments;

        })
        // 歌曲信息
        get(`/song/detail?ids=${this.id}`).then(res=>{

        // console.log('歌曲详情',res);

        this.songdetail=res.data.songs[0]

        console.log(this.songdetail);
    })
  },
    }


</script>

<style lang="scss" scoped>
$color:#f9f9f9;
$banxin:690rem;
$theme:#f8e24a;
.diantai{
    width: 550rem;
    height: 170rem;
    display: flex;

  justify-content: space-between;
  align-items: center;
    .diantaileft{
        img{
            width: 260rem;
            height: 170rem;
        }

    }
    .diantairight{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 170rem;
        align-items: start;
        z-index: 999;
        margin-left: 40rem;
        color: #fff;
        .title{
            font-size: 40rem;
            font-weight: 900;

        }
        .fm{
             font-size: 40rem;
            font-weight: 900;

        }
        .bottom{
            width: 250rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .bottom-left{
                width: 100rem;
                height: 50rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // background-color: red;
                
                span{
                    opacity: 0.2;
                    width: 2rem;
                    height: 6rem;
                    background-color: #333;
                    border: 1rem solid #333;
                    justify-content: space-between;
                    align-items: center;
                    margin-left: 6rem;
                    &:nth-child(3n-2){
                        height: 18rem;
                    }
                }

            }
            .bottom-right{
                width: 90rem;
                height: 60rem;
                background-color: $theme;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 60rem;
                span{
                    font-size: 30rem;
                    color: #000;
                }

            }

        }

    }
    
}



</style>